﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Tag="Layout - Grid Strategy with Line elements and Border">
    <Border
    BorderBrush="Black"
    BorderThickness="2"
    Margin="4"
    Width="320">
        <Grid Margin="-2">
            <!-- The negative margin kiss-fits the lines into the Border. -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="TextAlignment" Value="Center" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
                <Style TargetType="TextBlock" x:Key="TemplateTextBlockStyle">
                    <!--
                        New Silverlight 4.0 implicit styles do not seem
                        to be working in ControlTemplate Visual Tree?
                    -->
                    <Setter Property="TextAlignment" Value="Center" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
                <ControlTemplate x:Key="HeaderContentControlTemplate" TargetType="ContentControl">
                    <Border Background="LightGray" Margin="2,2,2,0">
                        <TextBlock Text="{TemplateBinding Content}" Style="{StaticResource TemplateTextBlockStyle}" />
                    </Border>
                </ControlTemplate>
                <ControlTemplate x:Key="HeaderContentControlLastColumnTemplate" TargetType="ContentControl">
                    <Border Background="LightGray" Margin="2,2,2,0">
                        <TextBlock Text="{TemplateBinding Content}" Style="{StaticResource TemplateTextBlockStyle}" />
                    </Border>
                </ControlTemplate>
                <Style TargetType="Line" x:Key="BaseLineStyle">
                    <Setter Property="Stroke" Value="Black" />
                    <Setter Property="Stretch" Value="Fill" />
                    <!-- This Stretch setting makes the grid effect. -->
                    <!--
                        In more complex designs you may need ZIndex force:
                        <Setter Property="Grid.ZIndex" Value="1" />
                    -->
                </Style>
                <Style x:Key="GridLineStyleHorizontal"
                    TargetType="Line"
                    BasedOn="{StaticResource BaseLineStyle}">
                    <Setter Property="X2" Value="2" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="VerticalAlignment" Value="Top" />
                    <Setter Property="Grid.ColumnSpan" Value="4"/>
                    <!--
                        ColumnSpan is hard-coded here; as a generic alternative use:
                        {Binding Path=ColumnDefinitions.Count, RelativeSource={RelativeSource AncestorType=Grid}}
                    -->
                </Style>
                <Style x:Key="GridLineStyleVertical"
                    TargetType="Line"
                    BasedOn="{StaticResource BaseLineStyle}">
                    <Setter Property="Y2" Value="2" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                    <Setter Property="Grid.RowSpan" Value="13"/>
                    <!--
                        RowSpan is hard-coded here; as a generic alternative use:
                        {Binding Path=RowDefinitions.Count, RelativeSource={RelativeSource AncestorType=Grid}}
                    -->
                </Style>
            </Grid.Resources>

            <!-- Grid Lines -->
            <Line Grid.Column="1" Style="{StaticResource GridLineStyleVertical}" />
            <Line Grid.Column="2" Style="{StaticResource GridLineStyleVertical}" />
            <Line Grid.Column="3" Style="{StaticResource GridLineStyleVertical}" />

            <Line Grid.Row="1" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="2" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="3" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="4" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="5" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="6" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="7" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="8" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="9" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="10" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="11" Style="{StaticResource GridLineStyleHorizontal}" />
            <Line Grid.Row="12" Style="{StaticResource GridLineStyleHorizontal}" />

            <!-- Row 0 -->
            <ContentControl Grid.Column="0" Grid.Row="0" Template="{StaticResource HeaderContentControlTemplate}">Char</ContentControl>
            <ContentControl Grid.Column="1" Grid.Row="0" Template="{StaticResource HeaderContentControlTemplate}">Dec</ContentControl>
            <ContentControl Grid.Column="2" Grid.Row="0" Template="{StaticResource HeaderContentControlTemplate}">Oct</ContentControl>
            <ContentControl Grid.Column="3" Grid.Row="0" Template="{StaticResource HeaderContentControlLastColumnTemplate}">Hex</ContentControl>

            <!-- Row 1 -->
            <TextBlock Grid.Column="0" Grid.Row="1">(nul)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="1">0</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="1">0000</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="1">0x00</TextBlock>

            <!-- Row 2 -->
            <TextBlock Grid.Column="0" Grid.Row="2">(soh)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="2">0</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="2">0000</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="2">0x00</TextBlock>

            <!-- Row 3 -->
            <TextBlock Grid.Column="0" Grid.Row="3">(stx)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="3">2</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="3">0002</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="3">0x02</TextBlock>

            <!-- Row 4 -->
            <TextBlock Grid.Column="0" Grid.Row="4">(etx)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="4">3</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="4">0003</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="4">0x03</TextBlock>

            <!-- Row 5 -->
            <TextBlock Grid.Column="0" Grid.Row="5">(eot)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="5">4</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="5">0004</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="5">0x04</TextBlock>

            <!-- Row 6 -->
            <TextBlock Grid.Column="0" Grid.Row="6">(enq)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="6">5</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="6">0005</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="6">0x05</TextBlock>

            <!-- Row 7 -->
            <TextBlock Grid.Column="0" Grid.Row="7">(ack)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="7">6</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="7">0006</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="7">0x06</TextBlock>

            <!-- Row 8 -->
            <TextBlock Grid.Column="0" Grid.Row="8">(bel)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="8">7</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="8">0007</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="8">0x07</TextBlock>

            <!-- Row 9 -->
            <TextBlock Grid.Column="0" Grid.Row="9">(bs)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="9">8</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="9">0010</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="9">0x08</TextBlock>

            <!-- Row 10 -->
            <TextBlock Grid.Column="0" Grid.Row="10">(ht)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="10">9</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="10">0011</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="10">0x09</TextBlock>

            <!-- Row 11 -->
            <TextBlock Grid.Column="0" Grid.Row="11">(nl)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="11">10</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="11">0012</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="11">0x0a</TextBlock>

            <!-- Row 12 -->
            <TextBlock Grid.Column="0" Grid.Row="12">(vt)</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="12">11</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="12">0013</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="12">0x0b</TextBlock>

            <!--
                data source: http://web.cs.mun.ca/~michael/c/ascii-table.html
            -->

        </Grid>
    </Border>
</UserControl>
